<template>
    <div style="text-align: center">
        <div v-wechat-title="$route.meta.title"></div>
        <h1 style="color: cornflowerblue; font-size: 30px">Welcome</h1>
        <el-card class="box">
            <h3>商家详细信息</h3>
            <el-descriptions border style="margin-top: 30px">
                <el-descriptions-item label="商家昵称">{{
                    detail.nike
                }}</el-descriptions-item>
                <el-descriptions-item label="登录账号">{{
                    detail.loginname
                }}</el-descriptions-item>
                <el-descriptions-item label="手机号"
                    ><el-tag
                        style="cursor: pointer"
                        @click="editTelBoxShow(detail.tel)"
                        >修改</el-tag
                    >
                    &nbsp;&nbsp;&nbsp;&nbsp;{{
                        detail.tel
                    }}</el-descriptions-item
                >
                <el-descriptions-item label="商家地址"
                    ><el-tag
                        style="cursor: pointer"
                        @click="editAddressBoxShow(detail.address)"
                        >修改</el-tag
                    >
                    &nbsp;&nbsp;&nbsp;&nbsp;{{
                        detail.address
                    }}</el-descriptions-item
                >
                <el-descriptions-item label="商品数"
                    >&nbsp;&nbsp;&nbsp;&nbsp;{{
                        info.goodCount
                    }}</el-descriptions-item
                >
                <el-descriptions-item label="订单数"
                    >&nbsp;&nbsp;&nbsp;&nbsp;{{
                        info.orderCount
                    }}</el-descriptions-item
                >
            </el-descriptions>
        </el-card>
        <el-dialog
            v-loading="loadingStatus"
            title="修改电话"
            :visible.sync="editTelBoxVisible"
            width="30%"
        >
            <el-input placeholder="请输入新电话" v-model="newTel">
                <template slot="prepend">新电话:</template>
            </el-input>
            <el-button type="primary" style="margin-top: 10px" @click="editTel"
                >提交</el-button
            >
        </el-dialog>
        <el-dialog
            v-loading="loadingStatus"
            title="修改地址"
            :visible.sync="editAddressBoxVisible"
            width="30%"
        >
            <el-input placeholder="请输入新地址" v-model="newAddress">
                <template slot="prepend">新地址:</template>
            </el-input>
            <el-button
                type="primary"
                style="margin-top: 10px"
                @click="editAddress"
                >提交</el-button
            >
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            info: [],
            detail: [],
            loadingStatus: false,
            editTelBoxVisible: false,
            editAddressBoxVisible: false,
            newTel: '',
            newAddress: '',
        };
    },
    created() {
        this.getInfo();
    },
    methods: {
        getInfo() {
            this.$http
                .get(
                    '/getBusDetail?busid=' +
                        window.sessionStorage.getItem('busid')
                )
                .then((res) => {
                    if (res.data.code !== 200) {
                        this.$message.error(res.data.msg);
                        return;
                    }
                    this.info = res.data.data;
                    this.detail = this.info.info;
                });
        },
        editTelBoxShow(tel) {
            this.newTel = tel;
            this.editTelBoxVisible = true;
        },
        editAddressBoxShow(address) {
            this.newAddress = address;
            this.editAddressBoxVisible = true;
        },
        editTel() {
            if (this.newTel == '') {
                this.$Message.error('新电话不能为空');
                return;
            }
            // 正则验证电话号码
            var reg = /^1[3|4|5|7|8][0-9]{9}$/;
            if (!reg.test(this.newTel)) {
                this.$Message.error('电话号码格式不正确');
                return;
            }
            this.loadingStatus = true;
            let params = new URLSearchParams();
            params.append('busid', window.sessionStorage.getItem('busid'));
            params.append('tel', this.newTel);
            this.$http.post('/editBusTel', params).then((res) => {
                console.log(res);
                if (res.data.code !== 200) {
                    this.$Message.error(res.data.msg);
                    return;
                }
                this.$Message.success(res.data.msg);
                this.editTelBoxVisible = false;
                this.loadingStatus = false;
                this.getInfo();
            });
        },
        editAddress() {
            if (this.newAddress == '') {
                this.$Message.error('新地址不能为空');
                return;
            }
            this.loadingStatus = true;
            let params = new URLSearchParams();
            params.append('busid', window.sessionStorage.getItem('busid'));
            params.append('address', this.newAddress);
            this.$http.post('/editBusAddress', params).then((res) => {
                if (res.data.code !== 200) {
                    this.$Message.error(res.data.msg);
                    return;
                }
                this.$Message.success(res.data.msg);
                this.loadingStatus = false;
                this.editAddressBoxVisible = false;
                this.getInfo();
            });
        },
    },
};
</script>


<style  scoped>
.box {
    height: 500px;
}
</style>>

